<template>
  <basic-container>
    <div>
      <el-form ref="form" searchform :model="form" :rules="rules" label-width="80px" @submit.native.prevent>
        <el-row>
          <el-col span="24" style="text-align: right;">
            <span>
              更新时间：
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="form.dateRange"
                size="mini"
                type="daterange"
                range-separator="to"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @change="searchForm">
              </el-date-picker>
            </span>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      @on-load="onLoad"
    >
      <template slot-scope="scope" slot="costError">
        <div @click="checkAccountError(scope.row.tenantId)" :style="(scope.row.accountVerify.yesterdayCount == 0 && scope.row.accountVerify.totalCount == 0)?'border-bottom: 1px solid green;color: green;cursor: pointer':'border-bottom: 1px solid red;color: red;cursor: pointer'">
          昨日{{scope.row.accountVerify.yesterdayCount}}
          累计{{scope.row.accountVerify.totalCount}}
        </div>
      </template>
      <template slot-scope="scope" slot="adsError">
        <div @click="checkAdsError(scope.row.tenantId)" :style="(scope.row.adsVerify.yesterdayCount == 0 && scope.row.adsVerify.totalCount == 0)?'border-bottom: 1px solid green;color: green;cursor: pointer':'border-bottom: 1px solid red;color: red;cursor: pointer'">
          昨日{{scope.row.adsVerify.yesterdayCount}}
          累计{{scope.row.adsVerify.totalCount}}
        </div>
      </template>
      <template slot-scope="scope" slot="onlineAdsError">
        <div @click="checkOnlineAdsError(scope.row.tenantId)" :style="(scope.row.onlineAdsVerify.yesterdayCount == 0 && scope.row.onlineAdsVerify.totalCount == 0)?'border-bottom: 1px solid green;color: green;cursor: pointer':'border-bottom: 1px solid red;color: red;cursor: pointer'">
          昨日{{scope.row.onlineAdsVerify.yesterdayCount}}
          累计{{scope.row.onlineAdsVerify.totalCount}}
        </div>
      </template>
      <template slot-scope="scope" slot="checkRecord">
        <div style="border-bottom: 1px solid blue;color: red;cursor: pointer;text-align:center;">
          <el-link style="text-align: center;" type="primary" @click="checkOperationRecord(scope.row.tenantId)">查 看</el-link>
        </div>
      </template>

    </avue-crud>
  </basic-container>
</template>

<script>

  import {getDateList} from "@/api/verification/beetlesaccountexception";
  import Moment from 'moment';
  /**
   * 校验首页
   */
  export default {
    data() {
      let start = Moment(new Date()).subtract(14, "days").toDate();
      let end = Moment(new Date()).subtract(1, "days").toDate();
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        query: {},
        form: {
          dateRange:[start,end],
        },
        rules:{
        },
        data: [],
        loading: false,
        option: {
          border: true,
          index: true,
          selection: false,
          addBtn: false,
          editBtn: false,
          viewBtn: false,
          delBtn: false,
          refreshBtn: false,
          columnBtn: false,
          menuWidth: 140,
          menu:false,
          column:[
            {
              label:'租户ID',
              prop:'tenantId'
            },
            {
              label:'租户名',
              prop:'tenantName'
            },
            {
              label:'账户花费-异常',
              prop:'costError'
            },
            {
              label:'广告花费-异常',
              prop:'adsError'
            },
            {
              label:'三方安装-异常',
              prop:'installsError'
            },
            {
              label:'在线广告-异常',
              prop:'onlineAdsError'
            },
            {
              label:'校验记录',
              prop:'checkRecord'
            },
          ]
        },
      };
    },
    methods: {
      //搜索按钮函数
      searchForm(){
        let query = {};
        if(this.form.dateRange != null && this.form.dateRange.length != 0) {
          query.startDate = this.form.dateRange[0];
          query.endDate = this.form.dateRange[1];
        }

        this.$refs.form.validate((valid) => {
          if(valid) {
            this.query = query;
            this.onLoad()
          }
        });
      },
      onLoad(params = {}) {
        this.loading = true;
        getDateList(
          Object.assign(params, this.query)
        ).then((res) => {
          res.data.sort((a,b)=>{
            return (a.tenantId * 1 - b.tenantId * 1);
          });
          this.data = res.data;
        }).finally(()=>{
          this.loading = false;
        });
      },

      checkAccountError(tenantId){
        this.$router.push({
          name:"账户花费校验",
          params:{
            tenantId: tenantId
          }
        })
      },
      checkAdsError(tenantId){
        this.$router.push({
          name:"广告花费校验",
          params:{
            tenantId: tenantId
          }
        })
      },
      checkOnlineAdsError(tenantId){
        this.$router.push({
          name:"在线广告校验",
          params:{
            tenantId: tenantId
          }
        })
      },
      checkOperationRecord(tenantId) {
        this.$router.push({
          name:"操作记录",
          params:{
            tenantId: tenantId
          }
        })
      },
    },
  };
</script>
<style lang="scss" scoped>
  .text{
    width: 45px;
    height:30px;
    float: left;
    font-size: 13px;
    margin-top: 3px;
    color: #72767b
  }

  /deep/.alarmText {
    color: red;
  }

  /deep/[searchform].el-form .el-form-item__error {
    top: -20px;
    left: 45px;
  }
  .search-circle{
    border-radius: 50%;
    border: 1px solid #dcdfe6;
    width: 30px;
    height: 30px;
    padding: 0;
    margin-right: 0;
  }
  .orange{
    color: #ff9543 ;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     color: #ff7a29;
  }
  .red{
    color: red;
  }
  .black{
    color: #000c17;
  }
</style>
